<template>
	<a-spin :spinning="spinningAll" tip="Loading...">
		<a-row :gutter="20">
			<a-col :span="7">
				<a-card>
					<a-tree :tree-data="treeData" block-node class="draggable-tree" show-icon show-line
						:field-names="{ title: 'name', key: 'id', children: 'children' }"
						@select="treeSelectHandler"></a-tree>
				</a-card>
			</a-col>
			<a-col :span="17">
				<a-card>
					<a-table :columns="columns" :dataSource="dataSource">
						<template #title>
							<div class="table-header" style="display: flex;gap: 10px">
								<a-button size="small" type="primary" danger @click="refresh">刷新</a-button>
								<a-input-search v-model:value="userName" placeholder="姓名" enter-button
									@search="onSearch" />
							</div>
						</template>
						<template #bodyCell="scope">
							<template v-if="scope.column.key === 'operation'">
								<a-button :icon="h(FileDoneOutlined)" type="link" @click="readFile(scope)">详情</a-button>
							</template>
						</template>
					</a-table>
				</a-card>
			</a-col>
		</a-row>
	</a-spin>

	<a-drawer title="文件预览" placement="right" width="100vw" v-model:visible="visible">
		<iframe style="height: 100vh;width: 93vw;" :src="pdfSrc"></iframe>
	</a-drawer>
</template>
<script setup>
import { doc_to_pdf } from "@/api/fetch";
import { ipcApiRoute } from "@/api/main";
import { ipc } from "@/utils/ipcRenderer";
import { FileDoneOutlined } from '@ant-design/icons-vue'
import { notification } from "ant-design-vue/lib";
import { h, onMounted, ref } from "vue";

let tree = []
let user = []
const spinning = ref(false);
const spinningAll = ref(false);
const form = ref({})
const open = ref(false);
const dataSource = ref([])
const columns = ref([
	{
		title: '姓名',
		dataIndex: 'name',
		key: 'name',
	},
	{
		title: '单位',
		dataIndex: 'danwei',
		key: 'danwei', ellipsis: true,
	},
	{
		title: '部门',
		dataIndex: 'bumen',
		key: 'bumen', ellipsis: true,
	},
	{
		title: '性别',
		dataIndex: 'gender',
		key: 'gender',
	},
	{
		title: '出生年月',
		dataIndex: 'birthDate',
		key: 'birthDate', ellipsis: true,
	},
	{
		title: '操作',
		width: '80px',
		key: 'operation',
	},
])
const treeData = ref([])
let currentDept = null



async function init() {
	let res = await ipc.invoke(ipcApiRoute.getUser, {})
	user = res.data
	console.log(user)
	dataSource.value = user
	let deptRes = await ipc.invoke(ipcApiRoute.getAllDepts, {})
	treeData.value = deptRes.data
}


onMounted(() => {
	// refresh()
	init()
})


const allOpen = ref(false)

function handleAllCancel() {
	file = null
	allOpen.value = false
	form.value = {}
}


function treeSelectHandler(e, target) {
	currentDept = target.node
	let id = currentDept.id;
	let childs = getAllChildIds(treeData.value, id)
	console.log(childs)
	dataSource.value = user.filter((item) => {
		return childs.includes(item.deptId)
	})
}

async function refresh() {
	spinningAll.value = true
	await doc_to_pdf()
	spinningAll.value = false
}

function getAllChildIds(data, targetId) {
	let result = new Set();

	function findNode(nodes, id) {
		for (const node of nodes) {
			if (node.id === id) {
				return node;
			}
			if (node.children && node.children.length > 0) {
				const found = findNode(node.children, id);
				if (found) return found;
			}
		}
		return null;
	}

	function collectIds(node) {
		if (!node) return;
		result.add(node.id);
		if (node.children && node.children.length > 0) {
			node.children.forEach(child => collectIds(child));
		}
	}

	const targetNode = findNode(data, targetId);
	collectIds(targetNode);

	return Array.from(result);
}

function handleChange(e) {
	file = e.file
}

/**
 * 文件预览
 */

const visible = ref(false)
const convertedHtml = ref('')
const pdfSrc = ref('')

async function readFile(scope) {
	visible.value = true
	let filePath = scope.value.path
	pdfSrc.value = new URL(filePath)
}

const userName = ref('')

async function onSearch() {
	if (!userName.value) {
		dataSource.value = user
		return
	}
	dataSource.value = user.filter((item) => {
		// console.log('%c user.vue 360 [ item ]: ', 'color: #bf2c9f; background: pink; font-size: 13px;', item.name.includes(userName.value))
		if (item.pinyin.toLowerCase()?.includes(userName.value.toLowerCase()) ) {
			return true
		}
	})
}
</script>
